<template>
    <div id="Home" style="background-color: rgb(217, 226, 95)">
    <el-container>
        <el-image 
        style="width: 970px; height: 90px; margin:0 auto;"
        :src="require('@/assets/back.jpg')">
      </el-image>
        <!-- <el-col :span="24" class="header">
            <el-col :span="20"><div class="logo">文化艺术项目交流活动策划系统</div></el-col>
        </el-col> -->
    </el-container>
    <el-row :gutter="20" style=" margin-left:50px; margin-right:50px; background-color: rgb(238, 241, 255); opacity:0.5; height: 40px">
        <div style="margin-top: 10px; margin-left: 200px;">
            <span>欢迎您回来: {{username}}</span>&emsp;&emsp;
            <span>{{cndate}}</span>
        </div>
    </el-row>
    <el-container style="height: 650px; ">
    <el-aside width="22%" height="100%" style="background-color: rgb(238, 241, 246); margin-left:10px; ">
        <el-menu :default-openeds="open_list">
        <el-submenu index="1">
            <template slot="title"><i class="el-icon-edit-outline"></i>活动登记</template>
            <el-menu-item index="1-1" @click.native="menuShowView('View11')">参与客商</el-menu-item>
            <el-menu-item index="1-2" @click.native="menuShowView('View12')">举办客商</el-menu-item>
            <el-menu-item index="1-3" @click.native="menuShowView('View13')">月份</el-menu-item>
        </el-submenu>
        <el-submenu index="2">
            <template slot="title"><i class="el-icon-files"></i>活动管理</template>
            <el-menu-item index="2-1" @click.native="menuShowView('View21')">已完成活动</el-menu-item>
            <el-menu-item index="2-2" @click.native="menuShowView('View22')">待完成活动</el-menu-item>
            <el-menu-item index="2-3" @click.native="menuShowView('View23')">活动信息反馈</el-menu-item>
            <el-menu-item index="2-4" @click.native="menuShowView('View24')">活动统计</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
            <template slot="title"><i class="el-icon-postcard"></i>信息管理</template>
            <el-menu-item index="3-1" @click.native="menuShowView('View31')">客户信息编辑查询</el-menu-item>
            <el-menu-item index="3-2" @click.native="menuShowView('View32')">员工信息编辑查询</el-menu-item>
            <el-menu-item index="3-3" @click.native="menuShowView('View33')">举办商信息表编辑</el-menu-item>
        </el-submenu>
        <!-- <el-submenu index="4">
            <template slot="title"><i class="el-icon-setting"></i>系统功能</template>
            <el-menu-item index="4-1">重新登陆</el-menu-item>
            <el-menu-item index="4-2">系统权限编辑</el-menu-item>
            <el-menu-item index="4-3">系统初始化</el-menu-item>
            <el-menu-item index="4-4">关闭退出</el-menu-item>
        </el-submenu> -->
        </el-menu>
    </el-aside>
    <el-container>
        <el-aside width=98%  style="background-color: rgb(238, 241, 246); margin-left:10px; margin-right:10px;">
            <el-main>
                <component v-bind:is="showView"></component>
            </el-main>
        </el-aside>
    </el-container>
    </el-container>
    </div>
</template>
<script>
import View11 from '../components/dataView/View1_1'
import View12 from '../components/dataView/View1_2'
import View13 from '../components/dataView/View1_3'
import View21 from '../components/dataView/View2_1'
import View22 from '../components/dataView/View2_2'
import View23 from '../components/dataView/View2_3'
import View24 from '../components/dataView/View2_4'
import View31 from '../components/dataView/View3_1'
import View32 from '../components/dataView/View3_2'
import View33 from '../components/dataView/View3_3'
import shadiaohangjie from '../components/dataView/shadiaohangjie'
export default {
    components: { View11, View12, View13, View21, View22, View23, View24, View31, View32, View33, shadiaohangjie },
    data () {
        return {
            showView: '',
            cndate: '',
            open_list: ['1', '2', '3'],
            image_url: 'D:/djangoprj/activitysystem/src/renderer/assets/back.png',
            username: ''
        }
    },
    methods: {
        menuShowView: function (viewName) {
            console.log(this.showView)
            this.showView = viewName
            console.log(this.showView)
        },
        strDateToCn (num) {
          var cn = ['O', '一', '二', '三', '四', '五', '六', '七', '八', '九']
          var tostr = '' + num
          if (num < 10) {
              return cn[num]
          } else if (num === 10) {
              return '十'
          } else if (num < 20) {
              return '十' + cn[tostr.charAt(1)]
          } else if (num === 20) {
              return '二十'
          } else if (num < 30) {
              return '二十' + cn[tostr.charAt(1)]
          } else if (num === 30) {
              return '三十'
          } else if (num > 30) {
              return '三十' + cn[tostr.charAt(1)]
          }
        }
    },
    mounted () {
      window.setInterval(() => {
        var date = new Date()
        var year = '' + date.getFullYear()
        var month = '' + (date.getMonth() + 1)
        var day = '' + date.getDate()
        var hour = date.getHours()
        var minutes = date.getMinutes()
        var second = date.getSeconds()
        var cnYear = this.strDateToCn(year.charAt(0)) + this.strDateToCn(year.charAt(1)) + this.strDateToCn(year.charAt(2)) + this.strDateToCn(year.charAt(3))
        this.username = sessionStorage.getItem('username')
        if (this.username === '' || this.username === null) {
          this.username = '未登录'
        }
        this.cndate = cnYear + '年' + this.strDateToCn(month) + '月' + this.strDateToCn(day) + '日  ' + hour + ':' + minutes + ':' + second
      }, 1000)
    },
    created () {
      this.username = sessionStorage.getItem('username')
      console.log(this.username)
      if (this.username === '' || this.username === null) {
        this.username = '未登录'
      }
    }
}
</script>
<style>
.el-menu-item {
    font-size: 13px;
    color: #303133;
    padding: 0 20px;
    cursor: pointer;
    -webkit-transition: border-color .3s,background-color .3s,color .3s;
    transition: border-color .3s,background-color .3s,color .3s;
    box-sizing: border-box;
}
.el-submenu .el-menu-item {
    height: 30px;
    line-height: 30px;
    padding: 0 45px;
    min-width: 200px;
}
.el-menu-item, .el-submenu__title {
    height: 26px;
    line-height: 26px;
    position: relative;
    white-space: nowrap;
    list-style: none;
}
</style>